<!--suppress ALL -->
<template>
  <div class = "container">
    <div>
      <el-button type = "primary">主要按钮</el-button>
      <el-button type = "text" @click = "open">点击打开 Message Box</el-button>
      <div class = "links">
        <nuxt-link class = "button--green" to = "/member/login">登陆</nuxt-link>
        <nuxt-link class = "button--green" to = "/page/home">页面1</nuxt-link>
        <nuxt-link class = "button--green" to = "/page2/home">页面2</nuxt-link>
        <nuxt-link class = "button--green" to = "/page3/home">页面3</nuxt-link>
        <nuxt-link class = "button--green" to = "/page4/home">页面4</nuxt-link>
      </div>
      <el-steps :active = "active" finish-status = "success">
        <el-step title = "步骤 1"></el-step>
        <el-step title = "步骤 2"></el-step>
        <el-step title = "步骤 3"></el-step>
      </el-steps>
      
      <el-button style = "margin-top: 12px;" @click = "next">下一步</el-button>
    </div>
  </div>
</template>

<script>
  import Logo from '~/components/Logo.vue';
  
  export default {
    data() {
      return {
        active: 0
      };
    },
    components: {},
    methods   : {
      next() {
        if (this.active++ > 2) this.active = 0;
      },
      open() {
        this.$alert('这是一段内容', '标题名称', {
          confirmButtonText: '确定',
          callback         : action => {
            this.$message({
              type   : 'info',
              message: `action: ${ action }`
            });
          }
        });
      }
    }
  };
</script>

<style>
  .container {
    margin          : 0 auto;
    min-height      : 100vh;
    display         : flex;
    justify-content : center;
    align-items     : center;
    text-align      : center;
  }
  
  .title {
    font-family    : 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    display        : block;
    font-weight    : 300;
    font-size      : 100px;
    color          : #35495e;
    letter-spacing : 1px;
  }
  
  .subtitle {
    font-weight    : 300;
    font-size      : 42px;
    color          : #526488;
    word-spacing   : 5px;
    padding-bottom : 15px;
  }
  
  .links {
    padding-top : 15px;
  }
</style>
